import React from "react";

import CheckCircleIcon from "@material-ui/icons/CheckCircle";
import DeleteOutlineOutlinedIcon from "@material-ui/icons/DeleteOutlineOutlined";

import { useTranslation } from "react-i18next";
import { ListItem, Typography } from "@material-ui/core";

export interface BankAccountItemProps {
  accountType: string;
  cardNumber: string;
  isCardVerified: boolean;
}

const BankAccountItem: React.SFC<BankAccountItemProps> = (props: any) => {
  const { isCardVerified, accountType, cardNumber } = props;
  const { t } = useTranslation();

  const boxBackground = require(`./../../../assets/images/BankAccounts/${accountType}Background.svg`);
  const accountIcon = require(`./../../../assets/images/BankAccounts/${accountType}.svg`);
  return (
    <>
      <div className="account-item">
        {isCardVerified && (
          <CheckCircleIcon
            className="check-icon text-success"
            fontSize="large"
          />
        )}{" "}
        <div className="detail-box">
          <img
            src={boxBackground}
            alt="box-background"
            className="background-img"
          />
          <ListItem className="account-detail">
            <img src={accountIcon} alt="account-icon" />
            {isCardVerified ? (
              <div className="text-success"> {t("toggles:verified")}</div>
            ) : (
              <div className="text-danger">{t("toggles:not_verified")}</div>
            )}
            <div className="card-information">
              <Typography color="textPrimary">{cardNumber}</Typography>
              <DeleteOutlineOutlinedIcon className="text-danger trash-icon" />
            </div>
          </ListItem>
        </div>
      </div>
    </>
  );
};

export default BankAccountItem;
